<template>
  <div class="page">
    <div class="flex align-center  hr" @click="bindGo('/pages/mine/update')" >
      <image class="hr-icon" :src="userDetail.avatar"></image>
      <div class="detail">
        <div class="name">{{ userDetail.nickname }}</div>
        <div class="mark">简介：欢迎大家来到我的公司～</div>
      </div>
    </div>

    <div class="hr-tabs">
      <div class="tab">
        <image src=""></image>
        <div class="tab-name">我的链能量</div>
      </div>
      <div class="tab">
        <image src=""></image>
        <div class="tab-name">我的简历</div>
      </div>
      <div class="tab">
        <image src=""></image>
        <div class="tab-name">我的发布</div>
      </div>
      <div class="tab">
        <image src=""></image>
        <div class="tab-name">我的收藏</div>
      </div>
      <div class="tab">
        <image src=""></image>
        <div class="tab-name">我的客服</div>
      </div>
      <div class="tab">
        <image src=""></image>
        <div class="tab-name">关于链聘</div>
      </div>
    </div>

    <BTab :tab-index="3"></BTab>
  </div>
</template>

<script setup lang="ts">
import BTab from "../../components/BTab.vue";
import {onMounted, shallowRef} from "vue";
import {user_data} from "../../api/user";
import {goUrl} from "../../utils/UniUtil";

const userDetail = shallowRef({});

onMounted(() => {
  user_data().then(res => {
    userDetail.value = res
  })
})

const bindGo = (url) => {
  goUrl(url)
}
</script>

<style lang="scss" scoped>
  .page {
    padding: 48rpx 0;
    .hr {
      height: 208rpx;
      background: #FFFFFF;
      border-radius: 92rpx;
      border: 2rpx solid rgba(0,0,0,0.08);
      padding: 32rpx 42rpx;
      margin: 0 48rpx;
      .hr-icon {
        width: 144rpx;
        height: 144rpx;
        border-radius: 50%;
      }
      .detail {
        padding: 0 32rpx;
        .name {
          height: 50rpx;
          font-size: 36r;
          font-weight: 500;
          color: #000000;
          line-height: 50rpx;
        }
        .mark {
          height: 32rpx;
          font-size: 22rpx;
          font-weight: 400;
          color: #000000;
          line-height: 32rpx;
          margin: 12rpx 0 0;
        }
      }
    }

    .hr-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      height: 520rpx;
      background: #FFFFFF;
      border-radius: 92rpx;
      border: 2rpx solid rgba(0,0,0,0.08);
      padding: 86rpx 0 0;
      margin: 48rpx 48rpx 0 ;
      .tab {
        display: flex;
        flex-flow: column;
        align-items: center;
        image {
          width: 92rpx;
          height: 92rpx;
          background: #FFFFFF;
          border-radius: 34rpx;
          border: 2rpx solid rgba(0,0,0,0.08);
          margin: 0 auto;
        }
        .tab-name {
          height: 34rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #000000;
          line-height: 34rpx;
          margin: 18rpx;
        }
      }
    }
  }
</style>
